<script>
import TitleA from "@/comps/comm/TitleA.vue";
import apiPage from "@/pages/v1/core/Page/js/apiPage";

export default {
  name: "ApiSelector",
  components: {TitleA},
  props:{
    value:[],
    height:{
      type:Number,
      default:300,
    },
  },
  data() {
    return{
      list:[],
      insideValue:[],
      app:"",
      name:"",
      key:"",
      updateKey:"",
      countSelect:0,
      countFree:0,
      appChoice:[],
    }
  },
  mounted() {
    if (!this.value){
      this.insideValue = []
    }else {
      this.insideValue = this.value
    }
    this.getList()
  },
  methods:{
    getList(){
      apiPage.findBy({page:1,limit:0},res=>{
        this.list = res
        this.rebuild()
        this.createChoice()
      })
    },
    rebuild(){
      let countSelect = 0
      let countFree = 0
      for (let listKey in this.list) {
        //过滤器
        if (this.app === "" && this.name === "" && this.key === ""){
          this.list[listKey].show = true
        }else {
          let filter = 0
          if (this.app !== ""){
            if (this.list[listKey].app.indexOf(this.app) > -1){
              filter++
            }else {
              filter-=10
            }
          }
          if (this.name !== ""){
            if (this.list[listKey].name.indexOf(this.name) > -1){
              filter++
            }else {
              filter-=10
            }
          }
          if (this.key !== "" ){
            if (this.list[listKey].key.indexOf(this.key) > -1){
              filter++
            }else {
              filter-=10
            }
          }
          this.list[listKey].show = filter > 0
        }
        this.list[listKey].select = this.insideValue.indexOf(this.list[listKey].key) !== -1
        if (this.list[listKey].select && this.list[listKey].show){
          countSelect++
        }
        if (!this.list[listKey].select && this.list[listKey].show){
          countFree++
        }
      }
      this.countSelect = countSelect
      this.countFree = countFree
      this.updateKey = Math.random()
    },
    add(key){
      this.insideValue.push(key)
      this.rebuild()
      this.$emit("input",this.insideValue)
    },
    remove(key){
      this.insideValue.splice(this.insideValue.indexOf(key),1)
      this.rebuild()
      this.$emit("input",this.insideValue)
    },
    selectAll(){
      let v = []
      for (const row of this.list) {
        v.push(row.key)
      }
      this.insideValue = v
      this.rebuild()
      this.$emit("input",this.insideValue)
    },
    clearAll(){
      this.insideValue = []
      this.rebuild()
      this.$emit("input",this.insideValue)
    },
    clearFilter(){
      this.app = ""
      this.name = ""
      this.key = ""
      this.rebuild()
    },
    createChoice(){
      this.appChoice = []
      this.list.map(data=>{
        if (this.appChoice.indexOf(data.app) === -1){
          this.appChoice.push(data.app)
        }
      })
    },
    leftSelectAll(){
      let v = []
      for (const row of this.list) {
        if (row.show && !row.select){
          v.push(row.key)
        }
      }
      if (v.length === 0){
        return
      }
      this.insideValue = this.insideValue.concat(v)
      this.rebuild()
      this.$emit("input",this.insideValue)
    },
    rightClearAll(){
      let v = []
      for (const row of this.list) {
        if (row.show && row.select){
          v.push(row.key)
        }
      }
      if (v.length === 0){
        return
      }
      let newValue = []
      for (const val of this.insideValue) {
        if (v.indexOf(val) === -1){
          newValue.push(val)
        }
      }
      this.insideValue = newValue
      this.rebuild()
      this.$emit("input",this.insideValue)
    }
  }
}
</script>

<template>
  <div>
    <div>
      <title-a>过滤器</title-a>
      <div>
        <mu-select v-model="app" @change="rebuild()" label="APP" label-float filterable><mu-option :value="item" :label="item" v-for="item in appChoice" :key="item"></mu-option></mu-select>
        <mu-text-field @keydown.enter="rebuild()" class="marr10" label-float v-model="name" label="名称"></mu-text-field>
        <mu-text-field @keydown.enter="rebuild()" class="marr10" label-float v-model="key" label="KEY"></mu-text-field>
        <mu-button @click="rebuild()" class="marr10" color="primary" round>过滤</mu-button>
        <mu-button @click="clearFilter" class="marr10" color="success" round>清空过滤器</mu-button>
        <mu-button @click="clearAll" class="marr10" color="error" round v-if="insideValue.length > 0">清空选择（{{insideValue.length}}）</mu-button>
      </div>
    </div>
    <div class="flex-r" :key="updateKey">
      <div class="flex1">
        <title-a>
          <div class="flrc">
            <div class="flex1">未选择</div>
            <div><mu-button @click="leftSelectAll()" color="primary" small flat>全选当前</mu-button></div>
          </div>
        </title-a>
        <div class="pad3 bdtso bdbso mart10" style="overflow-y: scroll;" :style="{'max-height':`${height}px`}">
          <div v-show="countFree === 0" class="tac">无可选项</div>

          <template  v-for="(row,index) in list">
            <div class="flrc bdbda fs8" v-if="!row.select && row.show" :key="index">
              <div class="flex1">{{row.app}}</div>
              <div class="flex2">{{row.name}}</div>
              <div class="flex3 fwb fwb">{{row.key}}</div>
              <div><mu-button icon @click="add(row.key)"><mu-icon value="arrow_right"></mu-icon></mu-button></div>
            </div>
          </template>
        </div>
      </div>

      <div class="flex1 padl5">
        <title-a>
          <div class="flrc">
            <div class="flex1">已选择</div>
            <div><mu-button @click="rightClearAll()" color="primary" small flat>清空当前</mu-button></div>
          </div>
        </title-a>
        <div class="pad3 bdtso bdbso mart10" style="overflow-y: scroll" :style="{maxHeight:`${height}px`}">
          <div v-show="countSelect === 0" class="tac">暂无数据</div>
          <template  v-for="(row,index) in list">
            <div class="flrc bdbda fs8" v-if="row.select && row.show" :key="index">
              <div><mu-button icon @click="remove(row.key)"><mu-icon value="arrow_left"></mu-icon></mu-button></div>
              <div class="flex1">{{row.app}}</div>
              <div class="flex2">{{row.name}}</div>
              <div class="flex3 fwb">{{row.key}}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>